<template>
  <div class="table-result" v-if="results.length > 0">
    <table style="width: 100%">
      <tr v-for="(item, idx) in results" :key="`item_${idx}`" :class="item.css">
        <td class="name">{{item.name}}</td>
        <td class="value">{{item.value}}</td>
      </tr>
    </table>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  name: 'TableResult',
  components: {}
})
export default class TableResult extends Vue {
  @Prop({ default: [] })
  resultList ?: any[]

  get results () {
    const arr : any[] = []
    if (!this.resultList) return []
    if (this.resultList.forEach) {
      this.resultList.forEach(item => {
        arr.push({
          name: item.title,
          value: item.content,
          css: ''
        })
        if (item.sec) {
          arr.push({
            name: item.sec.title,
            value: item.sec.content,
            css: 'secondary'
          })
        }
      })
    }
    return arr
  }
}
</script>

<style scoped lang="less">
.table-result {
  font-family: PingFangSC-Regular;
  font-size: 0.88rem;
  color: #323333;
  line-height: 1.5rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
  justify-content: flex-start;
  .name {
    white-space: nowrap;
    padding-right: 1rem;
    text-align: right;
    vertical-align: top;
    width: 30%;
  }
  .value {
    vertical-align: top;
    width: 100%;
  }
  .secondary {
    font-size: 0.8rem;
    color: #929292;
  }
}
</style>
